<template>
	<view class="pt-26 pb-1info.icon4 flex flex-dir-col flex-center">
		<!-- <w-icon v-if="info.icon" :name="info.icon" size="56"></w-icon> -->
		<text v-if="info.text" class='mt-4' :class="'font-color-'+info.textColor">{{info.text&&handleLang(info.text)}}</text>
		<view v-if="info.tips" class="flex mt-12" :class="'font-color-'+info.tipsColor">
			<!-- <text class="font-size-12" v-if="info.tips!='updatetime'">{{info.tips&&handleLang(info.tips)}}</text> -->
			<u-count-down class='ml-4'
				v-if="info.tips!='updatetime'&&order.surplus_time_text!=0&&(order.order_type<=2||order.order_type==10 || order.order_type==19 || order.order_type==11)&&order.order_status==1"
				@finish='finish' :time="order.surplus_time_text* 1000" format="mm:ss"></u-count-down>
			<text class="font-size-12" v-if="info.tips=='updatetime'">{{order.updatetime|formatDate}}</text>
		</view>
	</view>
</template>

<script>
	import OrderStatusMap from './orderStatusMap.js'
	export default {
		props: {
			order: {
				type: Object,
				default () {
					return {
						product: {}
					}
				}
			}
		},
		computed: {
			info() {
				return OrderStatusMap[this.order.order_type][this.order.order_status]
			}
		},
		methods: {
			finish() {
				this.$emit('finish')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.font-color-warning {
		/deep/ .u-count-down__text {
			@extend .font-color-warning,
			.font-size-12;
			line-height: normal;
		}
	}
</style>
